<template>
    <div class="own-main-bg" :style="islog?{background:`url(${UserInfo.head_pic})`}:{background:`url(${nologbg})`}">
        <!-- :style="{background:`url(${UserInfo.head_pic})`}" -->
        <div class="own-main">
            <div class="pertitle">
                <h2>HALF GO</h2>
                <h5 v-if="islog">{{UserInfo.nickname}}</h5>
                <h6 v-if="islog">ID:{{UserInfo.user_code}}</h6>
            </div>


            <div :class="['user-template']">
                <div :class="['user-header-template',toHight?'header-down':'header-up']" @click="uploadavater">
                    <div class="header-img" v-if="islog">
                        <img :src="islog?UserInfo.head_pic.indexOf('http:')>-1?`${UserInfo.head_pic}`:`http://www.starrymedia.vip${UserInfo.head_pic}`:''" class="header-img-item" alt="">
                    </div>
                    <div class="header-img-not" v-if="!islog">
                        登录
                    </div>
                    <img src="../../assets/img/own-header-border.png" class="header-border" alt="">
                </div>
                <div class="user-role">{{!islog?'游客':UserInfo.is_agent==0?'会员':'代理'}}</div>

                <div class="toucharea"  @click="Jumpto('/UserSetting')">
                    <img :class="['user-setting',toHight?'icon-down':'icon-up']" src="../../assets/img/own-user-setting.png"  alt="">
                </div>
                <div class="toucharea2" @click="JumptoMsgList">
                    <img :class="['user-message',toHight?'icon-down-b':'icon-up-b']" src="../../assets/img/own-user-msg.png"  alt="">
                </div>
            </div>

            <!-- 按钮组 -->
            <div class="own-main-btngroup">
                <img class="own-gift" src="../../assets/img/own-prasent.png" alt="">
                <van-row class="btn-group-template">
                    <van-col span="16">
                        <img class="own-sale" @click="showOrderOrSale(false)" src="../../assets/img/own-sale.png" alt="">
                        <img class="own-shoppingcar" src="../../assets/img/own-shoppingcar.png" @click="Jumpto('/shopcart')" alt="">
                        <img class="own-coupon" @click="Jumpto('/myCoupon')" src="../../assets/img/own-coupon.png" alt="">
                    </van-col>
                    <van-col span="8">
                        <img class="own-order" @click="showOrderOrSale(true)" src="../../assets/img/own-order.png" alt="">
                    </van-col>
                </van-row>
                <van-row class="btn-group-template2">
                    <van-col span="5">
                        <img class="menuBtn" @click="backIndex" src="../../assets/img/index-menu.png" alt="">
                    </van-col>
                    <van-col span="19">
                        <img class="earnBtn" @click="JumpToProxy" src="../../assets/img/own-earn.png" alt="">
                    </van-col>
                </van-row>
            </div>


            <div class="info-drawer-mark" v-if="!toHight" @click="toHight=true"></div>
            <div :class="['info-drawer-template',toHight?'info-drawer-template-down':'info-drawer-template-up']">
                
                <oot 
                    :showItem="toHight" 
                    v-if="isOrdOrSale" 
                    :BereceivedList="Bereceived" 
                    :receivedList="received"
                    @BereceivedChange="ChangeBereceived"
                    @confirmOrd="confirm"
                />
                <oas 
                    :showItem="toHight" 
                    v-if="!isOrdOrSale"
                    :receivedList="Xreceived"
                    :processList="process"
                    :overProList="overPro"
                    @Refresh="getrefund"
                />
            </div>


            
        </div>
    </div>
    <!-- :style="{background:`url(${image})`}" -->
</template>
<script>
import oot from '../../components/OwnOrderTpl'
import oas from '../../components/OwnAfterSale'
import {_getOrderList,_getUserRefund,_getOrderRefundList} from '../../service/order'
import {_ajaxindex} from '../../service/user'
import {_getmedia,_getjsapiticket} from '../../service/wxService.js'
const coverRec= data =>{
    let basearr=[]
    data.forEach(item=>{
        // item.showDetail=false
        item.order_goods.forEach(itx=>{
            basearr.push({
                good:itx,
                order:item,
                address:item.addr,
                showDetail:false,
            })
        })
    })
    return basearr
}

export default {
    data(){
        return{
            image:require("../../assets/img/own.jpg"),
            headerimg:"http://img4.imgtn.bdimg.com/it/u=1246207470,1516116328&fm=11&gp=0.jpg",
            nologbg:require("../../assets/img/own.jpg"),
            goodimg:"",
            islog:true,
            agent:{
                '0':'会员',
                '1':'代理',
            },
            toHight:true,
            isOrdOrSale:true,//订单或售后，true：售后，false：订单
            UserInfo:{
                head_pic:""
            },
            Bereceived:[],
            received:[],
            Xreceived:[],
            process:[],//处理中
            overPro:[],//已完成
        }
    },
    components:{
        oot,oas
    },
    mounted(){
        // console.log(this.$router.go())
        if(localStorage.getItem("user")==null||localStorage.getItem("user")==undefined){
            this.islog=false
            return
        }
        this.getUserInfo()
        this.getUserOrder()
        this.getrefund()
        this._getOrderRefundList()

        let showOrder=this.$route.query.showOrder
        if(showOrder==1){
            this.showOrderOrSale(true)
        }

    },
    methods:{
        async uploadavater(){
            var _this = this,imageLength=9;

            if(localStorage.getItem("user")==null || localStorage.getItem("user")==undefined){
                this.$router.push("/login")
                return
            }
            _this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
            })
            // alert("更换头像")
            var image={localIds:[],serverId:[]};　　//接收微信接口返回的参数
            var imageUrlList=[]　　//用户绑定页面上显示图片的变量
            var mediaIds=[] //接收上传图片返回的serverId（该字段就是调用获取临时素材接口的媒体ID）

            let localhref=window.location.href
            // alert("开始更换")
            await _getjsapiticket(localhref).then(res=>{
                console.log("_getjsapiticket",res)
                if(res.errcode==1){
                    localStorage.setItem("WXjsapi_ticket",JSON.stringify(res.data))
                    wx.config({
                        debug: false, 
                        appId: res.data.appid, // 必填，公众号的唯一标识
                        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                        signature: res.data.signature,// 必填，签名，见附录1
                        jsApiList: [
                            "uploadImage","chooseImage","downloadImage"
                        ]
                    });
                }
            })

            let uid= JSON.parse(localStorage.getItem("user")).user_id
            await wx.ready(()=>{
                wx.chooseImage({
                    count: 1, //上传图片的张数，最多上传9张
                    sizeType: ['original', 'compressed'],　　// 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'],　　// 可以指定来源是相册还是相机，默认二者都有
                    success: function(res1) {
                        console.log("uploadavater",res1)
                        // alert("fff")
                        wx.uploadImage({
                            localId:res1.localIds[0],
                            success: function(res2) {
                                console.log("uploadImageSuccess",JSON.stringify(res2))
                                try{
                                    let access_token=JSON.parse(localStorage.getItem("WXjsapi_ticket")).access_token
                                    // alert("access_token",access_token)
                                    _getmedia({
                                        access_token:access_token,
                                        media_id:res2.serverId,
                                        user_id:uid
                                    }).then(res=>{
                                        // _this.header=res.data
                                        _this.getUserInfo()
                                        _this.$toast.clear()
                                    })
                                }catch(e){
                                    _this.$toast("catch",JSON.stringify(e))
                                }
                            },
                            fail: function(e2) {
                                console.log("uploadImageError",JSON.stringify(e2));
                            }
                        });
                    },
                    fail: function(e1) {
                        console.log("uploadavater error",e1)
                    }
                });
            })
            wx.error(function(res){
                // window.location.href=window.location.href
                // alert(JSON.stringify(res))
                _this.$toast.clear()
            });

            _this.$toast.clear()
        },
        JumpToProxy(){
            if(this.islog){
                if(this.UserInfo.is_agent==0){
                    this.$router.push("/applyproxy")
                }else{
                    this.$router.push("/procenter")
                }
            }
        },
        JumptoMsgList(){
            if(!this.islog){
                this.$toast("请登录")
                return
            }
            localStorage.setItem("MessageList","/own")
            this.$router.push("/MsgList")
        },
        backIndex(){
            this.$router.push("/indexs")
        },
        Jumpto(key){
            if(!this.islog){
                this.$toast("请登录")
                return
            }
            this.$router.push(key)
        },
        showOrderOrSale(bool){
            if(!this.islog){
                this.$toast("请登录")
                return
            }
            this.toHight=false
            this.isOrdOrSale=bool
        },
        getUserInfo(){
            let _this=this
            if(localStorage.getItem("user")==null||localStorage.getItem("user")==undefined){
                this.$router.push("/login")
            }
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _ajaxindex({user_id:uid}).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    this.UserInfo=res.data
                }else{
                    _this.islog=false
                }
            })
        },
        ChangeBereceived(i){
            let arr=this.Bereceived
            this.Bereceived=[]
            for(let ff=0;ff<arr.length;ff++){
                if(ff==i){
                    arr[ff].showDetail=!arr[ff].showDetail
                }
            }
            this.Bereceived.push(...arr)
        },
        confirm(){
            console.log("1111")
            this.getUserOrder()
        },
        getUserOrder(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _getOrderList({//未收货
                is_yes:0,
                user_id:uid
            }).then(res=>{
                if(res.errcode==1){
                    _this.Bereceived=[]
                   let data=coverRec(res.data)
                    _this.Bereceived.push(...data)
                }else{
                    // _this.$toast("系统错误")
                }
            })
            _getOrderList({//已收货
                is_yes:1,
                user_id:uid
            }).then(res=>{
                if(res.errcode==1){
                    _this.received=[]
                    let data=coverRec(res.data)
                    _this.received.push(...data)
                    console.log("_this.received",_this.received)
                }else{
                    // _this.$toast("系统错误")
                }
            })
        },
        _getOrderRefundList(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _getOrderRefundList({user_id:uid}).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    let data=coverRec(res.data)
                    _this.Xreceived=[]
                    _this.Xreceived.push(...data)
                    console.log("_this.Xreceived",_this.Xreceived)
                }
            })
        },
        getrefund(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _getUserRefund({//办理中
                status:1,
                user_id:uid
            }).then(res=>{
                let data=coverRec(res.data)
                _this.process=[]
                _this.process.push(...data)
                console.log("_this.process",_this.process)
                console.log(res)
            })
            _getUserRefund({//已完成
                status:2,
                user_id:uid
            }).then(res=>{
                console.log(res)
                let data=coverRec(res.data)
                _this.overPro=[]
                _this.overPro.push(...data)
                console.log("_this.overPro",_this.overPro)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.own-main-bg{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    // background-image: url("../../assets/img/own.jpg");
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    // &::before{
    //     background-image: url("../../assets/img/own.jpg");
    //     background-repeat: no-repeat;
    //     background-position: center;
    //     background-size: cover;
    //     background-attachment: fixed;
    //     content: '';
    //     display: block;
    //     position: absolute;
    //     z-index: -1;
    //     top: 0;
    //     left: 0;
    //     right: 0;
    //     bottom: 0;
    //     margin: -20px;
    //     filter: blur(10px);
    //     transform: scale(1.2);
    // }
    .own-main{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .3);
        .pertitle{
            width: 100%;
            height: auto;
            text-align: left;
            padding-top: 45px;
            h2{
                font-family: "DINCond-BlackAlternate";
                font-size: 24px;
                color: #fff;
                margin-bottom: 0;
                margin-left: 36px
            }
            h5{
                .font-SC();
                font-weight: bold;
                font-size: 12px;
                color: #fff;
                margin-bottom: 0;
                margin-top: 33px;
                margin-left: 36px
            }
            h6{
                font-family: "DINPro-Bold";
                font-size: 12px;
                color: #fff;
                margin-bottom: 0;
                margin-top: 16px;
                margin-left: 36px
            }
        }


        .header-up{
            animation: headerUp ease .2s forwards;
            -moz-animation:headerUp ease .2s forwards ; /* Firefox */
            -webkit-animation:headerUp ease .2s forwards ; /* Safari and Chrome */
            -o-animation:headerUp ease .2s forwards ; /* Opera */
        }
        .header-down{
            animation: headerDown ease .2s forwards;
            -moz-animation:headerDown ease .2s forwards ; /* Firefox */
            -webkit-animation:headerDown ease .2s forwards ; /* Safari and Chrome */
            -o-animation:headerDown ease .2s forwards ; /* Opera */
        }
        @keyframes headerUp {
            from{
                top: 257px;
            }
            to{
                top: 173px;
            }
        }
        @keyframes headerDown {
            from{
                top: 173px;
            }
            to{
                top: 257px;
            }
        }

        .user-template{
            .user-header-template{
                width: 65px;
                height: 65px;
                border-radius: 32px;
                position: relative;
                position: fixed;
                top: 257px;
                left: 15px;
                z-index: 300;
                .header-img{
                    width: 75%;
                    height: 75%;
                    position: absolute;
                    top: 11%;
                    left: 11%;
                    z-index: 999;
                    border-radius: 50%;
                    overflow: hidden;
                    .header-img-item{
                        width: 100%;
                        height: 100%;
                    }
                }
                .header-img-not{
                    width: 80%;
                    height: 80%;
                    position: absolute;
                    top: 10%;
                    left: 10%;
                    z-index: 10;
                    border-radius: 50%;
                    overflow: hidden;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #fff;
                    .font-SC();
                    font-size: 12px;
                    color: #000;
                }
                .header-border{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 15;
                }
            }
            .user-role{
                width: 73px;
                height: 25px;
                position: fixed;
                top: 293px;
                left: 48px;
                z-index: 2;
                background-image: url("../../assets/img/own-user-role.png");
                background-position: center;
                background-size: contain;
                color: #ffffff;
                .font-SC();
                font-size: 12px;
                text-align: right;
                line-height: 25px;
                padding-right: 12px;
                letter-spacing: .2em;
                border-radius: 5px;
                box-shadow: 3px 3px 7px rgba(51, 51, 51, .47);
            }

            .toucharea{
                width: 50px;
                height: 50px;
                position: fixed;
                top: 270px;
                right: 50px;
                z-index: 50;
                .user-setting{
                    width: 16px;
                    position: fixed;
                    right: 56px;
                    top: 298px;
                }
            }
            .toucharea2{
                width: 50px;
                height: 50px;
                position: fixed;
                top: 270px;
                right: 0px;
                z-index: 50;
                .user-message{
                    width: 17px;
                    position: fixed;
                    right: 16px;
                    top: 300px;
                }
            }
            
        }

        


        .icon-up{
            animation: iconToup ease .2s forwards;
            -moz-animation:iconToup ease .2s forwards ; /* Firefox */
            -webkit-animation:iconToup ease .2s forwards ; /* Safari and Chrome */
            -o-animation:iconToup ease .2s forwards ; /* Opera */
        }
        .icon-down{
            animation: iconTodown ease .2s forwards;
            -moz-animation:iconTodown ease .2s forwards ; /* Firefox */
            -webkit-animation:iconTodown ease .2s forwards ; /* Safari and Chrome */
            -o-animation:iconTodown ease .2s forwards ; /* Opera */
        }
        @keyframes iconToup {
            from{
                top: 298px;
            }
            to{
                top: 180px;
            }
        }
        @keyframes iconTodown {
            from{
                top: 180px;
            }
            to{
                top: 298px;
            }
        }

        .icon-up-b{
            animation: iconToup-b ease .2s forwards;
            -moz-animation:iconToup-b ease .2s forwards ; /* Firefox */
            -webkit-animation:iconToup-b ease .2s forwards ; /* Safari and Chrome */
            -o-animation:iconToup-b ease .2s forwards ; /* Opera */
        }
        .icon-down-b{
            animation: iconTodown-b ease .2s forwards;
            -moz-animation:iconTodown-b ease .2s forwards ; /* Firefox */
            -webkit-animation:iconTodown-b ease .2s forwards ; /* Safari and Chrome */
            -o-animation:iconTodown-b ease .2s forwards ; /* Opera */
        }
        @keyframes iconToup-b {
            from{
                top: 300px;
            }
            to{
                top: 182px;
            }
        }
        @keyframes iconTodown-b {
            from{
                top: 182px;
            }
            to{
                top: 300px;
            }
        }


        .own-main-btngroup{
            width: 100%;
            height: auto;
            position: fixed;
            top: 330px;
            z-index: 1;
            .own-gift{
                width: 357px;
                margin: 0 auto;
                position: absolute;
                left: 0;
                right: 0;
            }
            .btn-group-template{
                margin-top: 42px;
                padding-left: 15px;
                .own-sale{
                    width: 108px;
                }
                .own-shoppingcar{
                    width: 108px;
                    margin: 11px;
                }
                .own-order{
                    width: 108px;
                    margin-top: 11px;
                }
                .own-coupon{
                    width: 227px;
                } 
            }
            .btn-group-template2{
                margin-top: 10px;
                padding-left: 15px;
                .menuBtn{
                    width: 50px;

                }
                .earnBtn{
                    width: 265px;
                    margin-top: 5px;
                    box-shadow: 3px 3px 7px rgba(51, 51, 51, .47);
                }
            }

        }

        .info-drawer-mark{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 20;
        }
        .info-drawer-template{
            position: fixed;
            z-index: 100;
            bottom: 0;
            top: 203px;
            width: 100%;
            background-color: #f8f8f8;
            border-radius: 10px 10px 0 0;
            overflow: hidden;

           
            


        }
        .info-drawer-template-up{
            animation: appup ease .2s forwards;
            -moz-animation:appup ease .2s forwards ; /* Firefox */
            -webkit-animation:appup ease .2s forwards ; /* Safari and Chrome */
            -o-animation:appup ease .2s forwards ; /* Opera */
        }
        .info-drawer-template-down{
            animation: appdown ease .2s forwards;
            -moz-animation:appdown ease .2s forwards ; /* Firefox */
            -webkit-animation:appdown ease .2s forwards ; /* Safari and Chrome */
            -o-animation:appdown ease .2s forwards ; /* Opera */
        }
        @keyframes appup {
            from{
                top: 2000px;
            }
            to{
                top: 210px;
            }
        }
        @keyframes appdown {
            from{
                top: 210px;
            }
            to{
                top: 2000px;
            }
        }





        @media only screen and (min-device-height: 10px) and (max-device-height: 690px){
            .user-template{
                .user-header-template{
                    width: 65px;
                    height: 65px;
                    border-radius: 32px;
                    position: relative;
                    position: fixed;
                    top: 180px;
                    left: 15px;
                    z-index: 300;
                    .header-img{
                        width: 75%;
                        height: 75%;
                        position: absolute;
                        top: 11%;
                        left: 11%;
                        z-index: 999;
                        border-radius: 50%;
                        overflow: hidden;
                        .header-img-item{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .header-img-not{
                        width: 80%;
                        height: 80%;
                        position: absolute;
                        top: 10%;
                        left: 10%;
                        z-index: 10;
                        border-radius: 50%;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #fff;
                        .font-SC();
                        font-size: 12px;
                        color: #000;
                    }
                    .header-border{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 15;
                    }
                }
                .user-role{
                    width: 73px;
                    height: 25px;
                    position: fixed;
                    top: 215px;
                    left: 48px;
                    z-index: 2;
                    background-image: url("../../assets/img/own-user-role.png");
                    background-position: center;
                    background-size: contain;
                    color: #ffffff;
                    .font-SC();
                    font-size: 12px;
                    text-align: right;
                    line-height: 25px;
                    padding-right: 12px;
                    letter-spacing: .2em;
                    box-shadow: 3px 3px 7px rgba(51, 51, 51, .47);
                }

                .toucharea{
                    width: 40px;
                    height: 50px;
                    position: fixed;
                    top: 270px;
                    right: 50px;
                    z-index: 50;
                    .user-setting{
                        width: 16px;
                        position: fixed;
                        right: 56px;
                        top: 223px;
                    }
                }
                .toucharea2{
                    width: 40px;
                    height: 50px;
                    position: fixed;
                    top: 270px;
                    right: 0px;
                    z-index: 50;
                    .user-message{
                        width: 17px;
                        position: fixed;
                        right: 16px;
                        top: 223px;
                    }
                }
            }

            .header-up{
                animation: headerUp ease .2s forwards;
                -moz-animation:headerUp ease .2s forwards ; /* Firefox */
                -webkit-animation:headerUp ease .2s forwards ; /* Safari and Chrome */
                -o-animation:headerUp ease .2s forwards ; /* Opera */
            }
            .header-down{
                animation: headerDown ease .2s forwards;
                -moz-animation:headerDown ease .2s forwards ; /* Firefox */
                -webkit-animation:headerDown ease .2s forwards ; /* Safari and Chrome */
                -o-animation:headerDown ease .2s forwards ; /* Opera */
            }
            @keyframes headerUp {
                from{
                    top: 180px;
                }
                to{
                    top: 173px;
                }
            }
            @keyframes headerDown {
                from{
                    top: 173px;
                }
                to{
                    top: 180px;
                }
            }


            .icon-up{
                animation: iconToup ease .2s forwards;
                -moz-animation:iconToup ease .2s forwards ; /* Firefox */
                -webkit-animation:iconToup ease .2s forwards ; /* Safari and Chrome */
                -o-animation:iconToup ease .2s forwards ; /* Opera */
            }
            .icon-down{
                animation: iconTodown ease .2s forwards;
                -moz-animation:iconTodown ease .2s forwards ; /* Firefox */
                -webkit-animation:iconTodown ease .2s forwards ; /* Safari and Chrome */
                -o-animation:iconTodown ease .2s forwards ; /* Opera */
            }
            @keyframes iconToup {
                from{
                    top: 223px;
                }
                to{
                    top: 180px;
                }
            }
            @keyframes iconTodown {
                from{
                    top: 180px;
                }
                to{
                    top: 223px;
                }
            }

            .icon-up-b{
                animation: iconToup-b ease .2s forwards;
                -moz-animation:iconToup-b ease .2s forwards ; /* Firefox */
                -webkit-animation:iconToup-b ease .2s forwards ; /* Safari and Chrome */
                -o-animation:iconToup-b ease .2s forwards ; /* Opera */
            }
            .icon-down-b{
                animation: iconTodown-b ease .2s forwards;
                -moz-animation:iconTodown-b ease .2s forwards ; /* Firefox */
                -webkit-animation:iconTodown-b ease .2s forwards ; /* Safari and Chrome */
                -o-animation:iconTodown-b ease .2s forwards ; /* Opera */
            }
            @keyframes iconToup-b {
                from{
                    top: 225px;
                }
                to{
                    top: 182px;
                }
            }
            @keyframes iconTodown-b {
                from{
                    top: 182px;
                }
                to{
                    top: 225px;
                }
            }



            .own-main-btngroup{
                width: 100%;
                height: auto;
                position: fixed;
                top: 250px;
                z-index: 1;
                .own-gift{
                    width: 357px;
                    margin: 0 auto;
                    position: absolute;
                    left: 0;
                    right: 0;
                }
                .btn-group-template{
                    margin-top: 42px;
                    padding-left: 15px;
                    .own-sale{
                        width: 108px;
                    }
                    .own-shoppingcar{
                        width: 108px;
                        margin: 11px;
                    }
                    .own-order{
                        width: 108px;
                        margin-top: 11px;
                    }
                    .own-coupon{
                        width: 227px;
                    } 
                }
                .btn-group-template2{
                    margin-top: 10px;
                    padding-left: 15px;
                    .menuBtn{
                        width: 50px;

                    }
                    .earnBtn{
                        width: 265px; 
                        margin-top: 5px;
                        box-shadow: 3px 3px 7px rgba(51, 51, 51, .47);
                    }
                }

            }

            .info-drawer-mark{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 20;
            }
            .info-drawer-template{
                position: fixed;
                z-index: 100;
                bottom: 0;
                top: 203px;
                width: 100%;
                background-color: #f8f8f8;
                border-radius: 10px 10px 0 0;
                overflow: hidden;

            
                


            }
            .info-drawer-template-up{
                animation: appup ease .2s forwards;
                -moz-animation:appup ease .2s forwards ; /* Firefox */
                -webkit-animation:appup ease .2s forwards ; /* Safari and Chrome */
                -o-animation:appup ease .2s forwards ; /* Opera */
            }
            .info-drawer-template-down{
                animation: appdown ease .2s forwards;
                -moz-animation:appdown ease .2s forwards ; /* Firefox */
                -webkit-animation:appdown ease .2s forwards ; /* Safari and Chrome */
                -o-animation:appdown ease .2s forwards ; /* Opera */
            }
            @keyframes appup {
                from{
                    top: 2000px;
                }
                to{
                    top: 210px;
                }
            }
            @keyframes appdown {
                from{
                    top: 210px;
                }
                to{
                    top: 2000px;
                }
            }
        }



    } 
}









</style>